<template>
  <div>
    <el-card class="box-card">
      <el-table :data="cartVo.items" style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="loading" element-loading-text="努力加载中..."
      >
        <template #empty>
          <el-image :src="require('@/assets/icon/nodata.png')"></el-image>
          <div>你的购物车空空如也...
            <router-link to="/home">快去商城逛逛吧</router-link>
          </div>
        </template>
        <el-table-column type="selection" width="55"/>
        <el-table-column label="预览" width="180">
          <template #default="scope">
            <div>
              <el-image :src="$img+scope.row.image"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称" width="180"/>
        <el-table-column label="属性值" width="180">
          <template #default="scope">
            <span v-for="value in scope.row.skuAttr">{{ value }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="数量" width="100"/>
        <el-table-column prop="price" label="单价" width="100"/>
        <el-table-column prop="totalPrice" label="合计" width="100"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="toConfirmOrder(item.skuId,item.count)">去下单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="delCart">批量删除</el-button>
      <el-button @click="buyAll">清空购物车</el-button>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {addCartApi, listCartApi, delCartsApi} from '@/api/cart'
import {ElMessage} from 'element-plus'
import {useRouter} from "vue-router";

let cartVo = ref({})
const router = useRouter()
const loading = ref(true)
let selectCartSkuId = ref([])

/**
 * 获取购物车列表
 */
function getCartList() {
  listCartApi().then(res => {
    cartVo.value = res.data
    loading.value = false
  })
}

/**
 * 表格选中
 * @param selection
 */
function handleSelectionChange(selection) {
  selectCartSkuId.value = selection.map(item => {
    return item.skuId
  })
}

function buyAll() {
  let selects = cartVo.value.items
      .filter(item => {
        // 使用 find 来检查 selectCartSkuId.value 中是否有匹配的 skuId
        return selectCartSkuId.value.find(item2 => item2 === item.skuId);
      })
      .map(item => {
        // 对满足条件的 item 进行转换，返回一个新对象
        return {
          skuId: item.skuId,
          buyNumber: item.count // 假设 item.count 是你要的购买数量
        };
      });
  if (selects.length === 0) {
    return ElMessage({
      message: '请选择要购买的商品',
      type: 'warning',
    })
  }
  router.push({
    path: '/order-confirm',
    query: {
      data: JSON.stringify(selects)
    }
  })
}

function toConfirmOrder(skuId, buyNumber) {
  //前往确认订单页面,传递参数：选择的skuid，购买的件数
  let data = {
    skuId,//选择的sku
    buyNumber//购买的件数
  }
  router.push({
    path: '/order-confirm',
    query: {
      data: JSON.stringify([data])
    }
  })
}

/**
 * 批量删除购物车记录
 */
function delCart() {
  delCartsApi(selectCartSkuId.value).final(() => {
    getCartList()
  })
}

onMounted(() => {
  getCartList()
})
</script>

<style scoped>

</style>
